import './WijmoComLogisticsAnnex.scss'

import { useState } from 'react'
import { PlusOutlined } from '@ant-design/icons'
import { Image, Upload } from 'antd'

import { Http } from '../../API'
import { useRequest } from 'alova/client'
import { useMount } from 'ahooks'

import { GetIndexedDB } from '../../Utils/IndexedDB'

const uploadHttp = 'https://transport.ljkjkf.com/baida/AddImage'


const getBase64 = file =>
    new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = error => reject(error);
    });


const UploadTemplate = ({ uuid, token, title, fileList, setFileList }) => {
    const { send } = useRequest(data => Http(data), { immediate: false })
    const [previewOpen, setPreviewOpen] = useState(false)
    const [previewImage, setPreviewImage] = useState('')
    const handlePreview = async file => {
        if (!file.url && !file.preview) file.preview = await getBase64(file.originFileObj)
        setPreviewImage(file.url || file.preview);
        setPreviewOpen(true);
    }
    const handleChange = ({ fileList: newFileList }) => setFileList(newFileList)

    const uploadButton = (
        <button style={{ border: 0, background: 'none' }} type="button">
            <PlusOutlined />
            <div style={{ marginTop: 8 }}>上传</div>
        </button>
    );

    const onRemove = e => {
        send({ url: 'posDeleteImage', path: [e.uuid] }).then(res => {
            console.log(res)
        })
    }

    return (
        <div className='UploadTemplate'>
            <div>{title}</div>
            <Upload
                action={uploadHttp}
                headers={{ Authorization: token }}
                listType="picture-card"
                fileList={fileList}
                data={{ ImageCategory: title, CaiLiaoYunShuUuid: uuid, PGUID: '4ec07860-3db2-47ab-b2f9-7696643f615d' }}
                onPreview={handlePreview}
                onChange={handleChange}
                onRemove={onRemove}
            >
                {fileList.length >= 10 ? null : uploadButton}
            </Upload>
            {previewImage && (
                <Image
                    wrapperStyle={{ display: 'none' }}
                    preview={{
                        visible: previewOpen,
                        onVisibleChange: visible => setPreviewOpen(visible),
                        afterOpenChange: visible => !visible && setPreviewImage(''),
                    }}
                    src={previewImage}
                />
            )}
        </div>
    )
}


const WijmoComLogisticsAnnex = ({ data }) => {
    const { uuid } = data
    const { send } = useRequest(data => Http(data), { immediate: false })

    const [token, setToken] = useState('')
    const [fileListA01, setFileListA01] = useState();
    const [fileListA02, setFileListA02] = useState();

    useMount(async () => {
        const token = await GetIndexedDB('token')
        setToken(token)
        send({ url: 'getYunShuImage', params: { CaiLiaoYunShuUuid: uuid } }).then(res => {
            const { data } = res
            const imageData = data.map(item => ({ uuid: item.uuid, url: item.webURL, imageCategory: item.imageCategory }))
            setFileListA01(imageData.filter(item => item.imageCategory === '物流发票'))
            setFileListA02(imageData.filter(item => item.imageCategory === '商品发票'))
        })
    })

    if (token && fileListA01 && fileListA02) {
        return (
            <div className='WijmoComLogisticsAnnex'>
                <UploadTemplate uuid={uuid} token={token} title='物流发票' fileList={fileListA01} setFileList={setFileListA01} />
                <UploadTemplate uuid={uuid} token={token} title='商品发票' fileList={fileListA02} setFileList={setFileListA02} />
            </div>
        )
    }
};

export default WijmoComLogisticsAnnex;